/*
 * @Description:
 * @Author: fhw
 * @Date: 2022-12-31 23:28:50
 */
import { defineComponent, h, PropType, ref, watchEffect } from 'vue'
import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
import './style.scss'
const props = {
	value: String as PropType<string>,
	btnIcon: {
		type: [String, Object] as PropType<object | string>,
		default: <PlusOutlined />,
	},
	prefixIcon: {
		type: Object as PropType<object>,
		default: <SearchOutlined />,
	},
} as const
export default defineComponent({
	props,
	emits: ['search', 'change', 'btnEvent', 'update:value'],
	setup(props, { emit }) {
		const value = ref()
		watchEffect(() => {
			value.value = props.value
		})
		function onSearch() {
			emit('search', value.value)
		}
		function onBtn() {
			emit('btnEvent')
		}
		return () => (
			<div class="search">
				<a-input
					placeholder="搜索"
					v-model={[value.value, 'value']}
					prefix={h(props.prefixIcon)}
					onPressEnter={onSearch}
					onChange={() => {
						emit('update:value', value.value)
						emit('change', value.value)
					}}
					allowClear
				/>
				<div class="searchBtn" onClick={onBtn}>
					{typeof props.btnIcon === 'string' ? props.btnIcon : <a-button icon={h(props.btnIcon)}></a-button>}
				</div>
			</div>
		)
	},
})
